<template>
  <div class="home">
     <my-header>商品列表</my-header>
     <ol>
       <li v-for="(item,index) in list" :key="index" :class="{active:checkIndex == index}" @click="checkIndex = index">{{item.name}}</li>
     </ol>
     <ul>
       <li v-for="(item,index) in list[checkIndex]?.child" :key="index">
          <img src="../assets/img.png" alt="">
          <section>
            <h4>{{item.name}}</h4>
            <p>￥{{item.price}}</p>
            <div>
              <i>{{item.payNum}}人付款</i>
              <span @click="jump(item)">＋</span>
            </div>
          </section>
       </li>
     </ul>
  </div>
</template>

<script>
import MyHeader from '../components/myHeader.vue'
import axios from 'axios';
import { reactive, toRefs } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  name: 'Home',
  components: {
    MyHeader
  },
  setup(){
    const store = useStore();
    const router = useRouter();
    const data = reactive({
      list:[], // 商品的列表
      checkIndex:0,
    })
    axios.get('goods.json').then(res => {
      // console.log(res);
      data.list = res.data;
    })
    const jump = (val) => {
       store.commit('addCart', val);
       router.push('/about');
    }
    return{
      ...toRefs(data),
      jump
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    height: 100%;
    background: #e9e9e9;
  }
  ol{
    height: 50px;
    display: flex;
    background: purple;
    color: #fff;
    li{
     width: 20%;
     text-align: center;
     line-height: 50px;
    }
    .active{
      background: #8d3ec5;
    }
  }
  ul{
    li{
      display: flex;
      padding: 10px;
      background: #fff;
      margin-bottom: 10px;
      img{
        width: 100px;
      }
      section{
        flex: 1;
        margin-left: 10px;
        p{
          margin-top: 16px;
          color: #8d3ec5;
        }
        div{
          color: #999;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          span{
            font-size: 16px;
            color: #fff;
            padding: 0px 7px;
            background: #8d3ec5;
            border-radius: 16px;
          }
        }
      }
    }
  }
</style>
